<template>
    <div class="data-source-list">
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 基础表格 </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container">
                <div class="select-head">
                    <el-button icon="el-icon-plus" @click="dataSource = {},addDataSourceVisible=true" class="button-add">添加数据中心</el-button>
                </div>
                <div class="table-body">
                    <el-table :data="tableData" border style="width: 100%"
                        height='calc(100vh - 280px)'
                        :header-row-style="{borderRadius: '10px 10px 0px 0px' }"
                        :header-cell-style="{textAlign:'center',fontSize: '21px', 
                            fontFamily: 'Adobe Heiti Std', fontWeight: '600', color: '#606266' }"
                        :cell-style="{textAlign:'center',fontSize:'16px',color:'#919398'}"
                        >
                        <el-table-column prop="name" label="数据中心名称"> </el-table-column>
                        <el-table-column prop="dataSource" label="数据源"> </el-table-column>
                        <el-table-column prop="companyCode" label="公司代码"> </el-table-column>
                        <el-table-column prop="username" label="用户名"> </el-table-column>
                        <el-table-column prop="password" label="密码"> </el-table-column>
                        <el-table-column prop="sqlmodel" label="数据库类型"> </el-table-column>
                        <el-table-column  label="操作" >
                            <template slot-scope="scope">
                                <el-button style="background:#E73F3F;color:#fff" size="mini" round @click="deleteById(scope.row.id)">删除</el-button>
                                <el-button style="background:#BF69D4;color:#fff" size="mini" round  @click="showEditDialog(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
        </div>
        <!-- 编辑数据中心 -->
        <el-dialog title="编辑数据中心" :visible.sync="editDataSourceVisible" center 
            :close-on-click-modal = false :close-on-press-escape = false :show-close = false
            width="33%" top="25vh" class="add-data-source">
            <el-form ref="editDataSourceForm" :rules="saveDataSourceRules" :model="editDataSource" label-width="120px">
                <el-form-item label="数据中心"  prop="name">
                    <el-input v-model="editDataSource.name" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="数据源"  prop="dataSource">
                    <el-input v-model="editDataSource.dataSource" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="公司代码"  prop="companyCode">
                    <el-input v-model="editDataSource.companyCode" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="用户名"  prop="username">
                    <el-input v-model="editDataSource.username" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="密码"  prop="password">
                    <el-input v-model="editDataSource.password" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="数据库类型"  prop="sqlmodel">
                    <el-input v-model="editDataSource.sqlmodel" size="medium"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button style="background:#fff;color:#785DF1;font-size:20px;font-weight:400;" @click="editDataSourceVisible = false" size="medium">取 消</el-button>
                <el-button  style="background:#785DF1;color:#fff;font-size:20px;font-weight:400;"  @click="saveEditDataSource('editDataSourceForm')" size="medium">保 存</el-button>
            </span>
        </el-dialog>

        <el-dialog title="添加数据中心" :visible.sync="addDataSourceVisible" center 
            :close-on-click-modal = false :close-on-press-escape = false :show-close = false
            width="33%" top="25vh" class="add-data-source">

            <el-form ref="addDataSourceForm" :rules="saveDataSourceRules" :model="dataSource" label-width="120px">
                <el-form-item label="数据中心"  prop="name">
                    <el-input v-model="dataSource.name" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="数据源"  prop="dataSource">
                    <el-input v-model="dataSource.dataSource" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="公司代码"  prop="companyCode">
                    <el-input v-model="dataSource.companyCode" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="用户名"  prop="username">
                    <el-input v-model="dataSource.username" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="密码"  prop="password">
                    <el-input v-model="dataSource.password" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="数据库类型"  prop="sqlmodel">
                    <el-input v-model="dataSource.sqlmodel" size="medium"></el-input>
                </el-form-item> 
                                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button style="background:#fff;color:#785DF1;font-size:20px;font-weight:400;" @click="dataSource={},addDataSourceVisible = false" size="medium">取 消</el-button>
                <el-button  style="background:#785DF1;color:#fff;font-size:20px;font-weight:400;"  @click="saveDataSource('addDataSourceForm')" size="medium">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { dataSourceListData,updateDataSource,deleteDataSourceById} from '@/api/index';
export default {
    name: 'DataSourceList',
    data() {
        return {
            saveDataSourceRules:{
                name:[
                    { required: true, message: '请输入数据中心名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }],
                dataSource:[
                    { required: true, message: '请输入数据源', trigger: 'blur' }],
                companyCode:[
                    { required: true, message: '请输入公司代码', trigger: 'blur' }],
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' }],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' }],
                sqlmodel:[
                    { required: true, message: '请输入数据库类型', trigger: 'blur' }],
            },
            // 编辑数据中心
            editDataSourceVisible:false,
            editDataSource:{},



            //添加数据中心
            addDataSourceVisible:false,
            // 添加数据中心
            dataSource:{
                // baseGroup:'',
                isShare:false,
                isDefault:false,
                // sourceStationId:'x站点'
            },
            tableData: [],
        };
    },
    created() {
        this.getDataSourceList()
    },
    methods: {
        getDataSourceList(){
            dataSourceListData().then(res=>{
                this.tableData = res.data
            })
        },
        /**
         * 显示编辑当前数据中心信息
         */
        showEditDialog(row){
            // 深拷贝
            this.editDataSource = JSON.parse(JSON.stringify(row))
            this.editDataSourceVisible = true
        },

        //保存编辑后的内容
        saveEditDataSource(refName){
         this.$refs[refName].validate((valid) => {
            if (!valid) {
                return false;
            } 
            this.$confirm('确定要保存编辑后的内容吗？', '提示', {
                type: 'warning'
            }).then(() => {
                updateDataSource(this.editDataSource).then(res=>{
                    if (res.success) {
                        this.$message.success("保存成功")
                        this.editDataSourceVisible = false
                        this.getDataSourceList()
                    }
                })

            }).catch(() => {});
            });
        },
        /**
         * 保存添加的数据中心
         */
        saveDataSource(refName){
         this.$refs[refName].validate((valid) => {
            if (!valid) {
                return false;
            } 
            //校验通过 执行逻辑处理
            this.$confirm('确定要保存添加吗？', '提示', {
                type: 'warning'
            }).then(() => {
                 updateDataSource(this.dataSource).then(res=>{
                    if (res.success) {
                        this.$message.success("添加成功")
                        this.addDataSourceVisible = false
                        this.getDataSourceList()
                    }
                })
            }).catch(() => {});
            });

        },
        deleteById(id){
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                 deleteDataSourceById({id}).then(res=>{
                    if (res.success) {
                        this.$message.success("删除成功")
                        this.getDataSourceList()
                    }
                })
            }).catch(() => {});
        }
    }
};
</script>

<style scoped>
/* 添加设备按钮 */
.button-add{
    float: right;
    height: 43px;
    background: #FFFFFF;
    border: 1px solid #C4B0FD;
    border-radius: 10px;
    color: #AD60CF;
    margin-bottom: 15px;

    font-size: 24px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    line-height: 13px;
}
.data-source-list .container{
    height: calc((100vh - 220px));
    background: #FFFFFF;
    box-shadow: 0px 0px 16px 0px rgba(44, 80, 197, 0.18);
    border-radius: 10px;
}
.data-source-list .container .select-head{
    margin-bottom: 20px;
}

/* 添加设备弹框 */
/* .add-data-source{
    border-radius: 10px;
} */
.data-source-list .add-data-source .add-data-source-plus{
    font-size: 18px;
    font-weight: 900;
    color: #745CF2;
    margin-left: 5px;
}
.add-data-source /deep/ .el-input{
    width: 268px;
    /* height:40px ; */
}
.add-data-source /deep/ .el-dialog__title{
    width: 79px;
    height: 19px;
    font-size: 20px;
    font-family: Source Han Sans SC;
    font-weight: 600;
    color: #333333;
}
.add-data-source /deep/ .el-dialog__body{
    margin-left: 15%;
}
.add-data-source /deep/ .el-form-item__label{
    width: 71px;
    height: 18px;
    font-size: 18px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #626262;
}
</style>
